<template>
    <div 
        class="head-cp"
        :style="{
            transform:show?'':'translateY(calc(0px - var(--head-height)))'
        }">
        <div class="container">
            <router-link
                class="left" 
                to="/">
                毒蘑菇配色
            </router-link>
            <MyTabsSlot
                class="right tab-list"
                :activeIndex="activeIndex">
                <router-link 
                    :class="{
                        'right-item':true,
                    }"
                    to="/search">
                    <svg t="1599909770692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13617" width="64" height="64"><path d="M942.795162 1023.900117zM991.83769 905.339056L884.763168 798.264534C952.084276 714.262973 992.436988 607.687866 992.436988 491.923527c0-270.682794-220.142021-490.724932-490.724932-490.724932C231.129146 1.098712 10.887242 221.240734 10.887242 491.923527S231.129146 982.848225 501.612173 982.848225c104.877097 0 202.063207-33.061256 281.869684-89.295357L893.552868 1003.623878c13.584081 13.584081 31.363246 20.376122 49.142411 20.376122 17.779165 0 35.55833-6.792041 49.142411-20.376122 27.168162-27.168162 27.168162-71.11666 0-98.284822zM131.645728 492.02341c0-203.960983 166.005462-370.066329 370.066328-370.066328 204.160749 0 370.066329 165.905579 370.066329 370.066328 0 203.960983-166.005462 370.066329-370.066329 370.066329S131.645728 695.984393 131.645728 492.02341z" p-id="13618" fill="#3a3a59"></path></svg>
                </router-link>
                <router-link 
                    :class="{
                        'right-item':true,
                    }"
                    to="/create">
                    <svg t="1599909144556" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7571" width="48" height="48"><path d="M992.969697 417.047273h-358.710303a31.030303 31.030303 0 0 1-31.030303-31.030303V31.030303a31.030303 31.030303 0 0 0-31.030303-31.030303h-124.121212a31.030303 31.030303 0 0 0-31.030303 31.030303v354.986667a31.030303 31.030303 0 0 1-31.030303 31.030303H31.030303a31.030303 31.030303 0 0 0-31.030303 31.030303v124.121212a31.030303 31.030303 0 0 0 31.030303 31.030303h354.986667a31.030303 31.030303 0 0 1 31.030303 31.030303V992.969697a31.030303 31.030303 0 0 0 31.030303 31.030303h124.121212a31.030303 31.030303 0 0 0 31.030303-31.030303v-358.710303a31.650909 31.650909 0 0 1 31.030303-31.030303H992.969697a31.030303 31.030303 0 0 0 31.030303-31.030303v-124.121212a31.030303 31.030303 0 0 0-31.030303-31.030303z" p-id="7572" fill="#3a3a59"></path></svg>
                </router-link>
                <router-link 
                    :class="{
                        'right-item':true,
                        'right-bt':true,
                        'current-item':activeIndex==(index+2),
                    }"
                    v-for="(item,index) in linkList" :key="index"
                    :to="item.path">
                    {{item.title}}
                </router-link>
            </MyTabsSlot>
        </div> 
    </div>
</template>

<script>
/*
 头部组件
 */
import MyTabsSlot from '@/components/MyTabsSlot';
export default {
    components:{MyTabsSlot},
    data(){
        return{
            show:true, //控制头部是否显示
            activeIndex:-1,
            linkList:[
                {
                    path:'/taking',
                    name:'Taking',
                    title:'取色',
                },
                {
                    path:'/color',
                    name:'Color',
                    title:'配色',
                },
                {
                    path:'/gradient',
                    name:'Gradient',
                    title:'渐变色',
                },
                {
                    path:'/shadow',
                    name:'Shadow',
                    title:'边框阴影',
                },
                {
                    path:'/mine',
                    name:'Mine',
                    title:'我的',
                },
            ],
        };
    },
    watch: {
        $route:{
            handler(to){
                this.activeIndex = -1;
                this.linkList.some((item,index)=>{
                    if(item.name == to.name){
                        console.log(to.name);
                        this.activeIndex = index + 2;
                        return true;
                    }
                });
            },
            immediate: true,
        },
    },
    created(){
        this.initEvent();
    },
    methods:{
        initEvent(){ //初始化滚动事件
            let p,t = 0;
            const that = this;
            window.addEventListener("scroll",function(){
                p = this.scrollY;
                if(p>=60){
                    if(t<=p){ //表示向下滚动
                        that.show = false;
                    }else{
                        that.show = true;
                    }
                    t=p;
                }else{
                    that.show = true;
                }
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.head-cp{
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    height: var(--head-height);
    padding: 0 15px;
    position:fixed;
    top: 0;
    z-index:999;
    transition: all 0.2s;
    border-bottom: 1px solid #e4e4e4;
    .container{
        max-width: var(--container-width);
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .left{
            font-size: 1.7rem;
            line-height: 100%;
            font-weight:bold;
            display: flex;
            flex-direction: row;
            align-items: center;
            min-width: 120px;
            letter-spacing: 3px;
            img{
                width: 25px;
                height: 25px;
                border-radius: 5px;
                margin-right: 15px;
                border: 2px solid #ffffff;
            }
        }
        .right{
            height: 100%;
            --my-tabs-padding:0px;
            --my-tabs-border-radius:0px;
            background-color: transparent;
            /deep/.my-tabs-active-item-bg{
                background-color: #eaf2ff;
            }
            .right-item{
                height: 100%;
                font-size: 1.2rem;
                line-height: 1.2rem;
                min-width:fit-content;
                border-radius: 2px;
                cursor: pointer; 
                transition: all 0.2s;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #929292;
                svg{
                    width: 15px;
                    height: 15px;
                    padding: 5px;
                }
            }
            .right-bt{
                padding: 0 8px;
                box-sizing: border-box;
                &:hover{
                    color: #1e80ff;
                    background-color: #eaf2ff;
                }
            }
            .current-item{
                color: #1e80ff;
                font-weight: bold;
            }
        }
    }
}
</style>